<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />

<!-- Website Design By: www.happyworm.com -->
<title>Demo : jPlayer as an audio player</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="skin/blue.monday/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	var txt = new Array();
	var lrc = new Array();

	getLrc($("#list>ul>li").eq(0).html());
	function getLrc(l) {
		$.ajax({
			type: "GET",
			url: "lrc/" + l + ".lrc",
			dataType: "text",
			success: function(data){
				
				txt = data.split("\n");
				
				for (var i = 0; i < txt.length; i++) {
					
					lrc[i] = new Array();
					lrc[i][0] = txt[i].substr(1,8);
					lrc[i][1] = txt[i].substr(10);

					$("#lrc>ul").append("<li>" + lrc[i][1] +"</li>");

				}
			}
		});
	}

	$("#jquery_jplayer_1").jPlayer({
		ready: function (event) {
			$(this).jPlayer("setMedia", {
				mp3:"music/逍遥叹.mp3"
			});
		},
		timeupdate : function (obj){
            var time1 = Math.floor(obj.jPlayer.status.currentTime);	

        	for (var i = 0; i < lrc.length; i++) {
        		var time2 = new Array();
        		time2 = lrc[i][0].split(":");
        		var time3 = Math.floor(time2[0]) * 60 + Math.floor(time2[1]);
        		if (time1 === time3) {
        		console.log("i=" + i +";time1=" + time1 + "time3=" + time3)			
        			$("#lrc>ul>li").removeClass().eq(i).addClass("now");
        			$("#lrc>ul").animate({"top":  -24 * i + "px"},200,function () {return});      			
        		}
        	}
        	
        },
		        
        ended: function (event) {
        	$("#lrc>ul").css("top","0");
        },
		swfPath: "js",
		supplied: "mp3",
		wmode: "window"
	});	

	$("#list>ul>li").dblclick(function () {
		var music = $(this).html();
		getLrc(music);
		$("#lrc>ul").empty().css("top","0");
		$("#jquery_jplayer_1").jPlayer("clearMedia").jPlayer("setMedia",{mp3:"/music/" + music + ".mp3"}).jPlayer("play");
	});

});

</script>

<style type="text/css">
.now {
	color: blue;
	font-weight: bold;
}

#lrc {
	width: 420px;
	height: 300px;
	overflow: hidden;
	font-size: 12px;
	position: relative;;
}
#lrc ul {
	margin: 0;
	padding: 50px 0 0 10px;
	position: absolute;
	width: 410px;
	top: 0;
	left: 0;
}
#lrc ul li {
	list-style-type: none;
	height: 24px;
	line-height: 24px;
}
</style>
</head>
<body>

	<div id="jquery_jplayer_1" class="jp-jplayer"></div>

	<div id="jp_container_1" class="jp-audio">

			<div class="jp-interface">
				<ul class="jp-controls">
					<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
					<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
					<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
					<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
					<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
					<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
				</ul>
				<div class="jp-progress">
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>
				<div class="jp-time-holder">
					<div class="jp-current-time"></div>
					<div class="jp-duration"></div>
				</div>
			</div>
			<div class="jp-title">Cro Magnon Man</div>

	</div>

	<div id="lrc"><ul></ul></div>

	<div id="list">
		<ul>
			<li>逍遥叹</li>
			<li>六月的雨</li>
		</ul>
	</div>
</body>

</html>
